import React, { Component } from 'react'
import { Toast } from 'antd-mobile'
import { NavBar, Icon, Image, FlatList, Radio, Button } from 'components'
// import { End } from '../../../viewComponent'
import { post, msg, NotBean } from '../../../utils'
import { Link } from 'react-router-dom'

interface IState {
    isLoading: boolean
    edit: boolean
    selectd: number
    selectAll: boolean
}

export default class MyCollection extends Component<any, IState> {
    public screenbar = [
        {
            title: '默认'
        },
        {
            title: '降价'
        },
        {
            title: '促销'
        }
    ]

    public state = {
        isLoading: true,
        hasMore: true,
        selectd: 0,
        edit: false,
        selectAll: false
    }

    private index: number = 0
    public componentDidMount () {
        this.setState({
            edit: false
        })
    }
    public render(): JSX.Element {
        const { collData } = this.props
        const { edit, selectAll } = this.state
        return (
            <div className={`myCollection ${(collData.length > 0) ? 'myCollection_bgWhite' : ''}`}>
                <NavBar
                    title="收藏的商品"
                    right={
                        <div className="myCollection_NavRight">
                            {edit ? <span onClick={() => { this.setState({ edit: false }) }}>完成</span> : <span onClick={this.handleEdit}>编辑</span>}
                            <span>
                                <Icon type="search" />
                            </span>
                        </div>}
                    fixed={true}
                />
                {/* <div className="myCollection_screenbar">
                    {
                        this.screenbar.map((item: any, i: number) => {
                            return (
                                <div className={`myCollection_screenbar_item ${selectd === i ? 'myCollection_screenbar_active' : ''}`} onClick={this.handleClickScreen.bind(this, i)} key={i}>{item.title}</div>
                            )
                        })
                    }
                    <div className="myCollection_screenbar_item" onClick={this.handleClickCategory}>
                        <span>分类</span>
                        <span className="myCollection_screenbar_item_categoryIcon"><img src={require('../../../assets/myCollection_category.png')} /></span>
                    </div>
                </div> */}
                <FlatList
                    style={{ paddingBottom: '0.6rem' }}
                    data={collData}
                    ListEmptyComponent={NotBean}
                    onRefresh={this.getData}
                    renderItem={(item: any, index: number) => {
                        return (
                            <Link to={`/shopDetail/${item.id}`} key={index} >
                                <div style={{ padding: '0 0.7rem', marginTop: '0.6rem' }}>
                                    <div className="myCollection_listViewItem">
                                        {edit && <div className="flex_center"><Radio checked={item.active} onChange={this.handleChangeSelet.bind(this, index)} /></div>}
                                        <div className="myCollection_listViewItem_goodsImgWrap">
                                            <Image src={item.goods_pic} className="myCollection_listViewItem_goodsImgWrap_goodsImg" />
                                        </div>
                                        <div className="myCollection_listViewItem_goodsInfo">
                                            <div className="myCollection_listViewItem_goodsInfo_title">
                                                {item.goods_name}
                                            </div>
                                            <div className="myCollection_listViewItem_goodsInfo_priceInfo">
                                                <p>
                                                    <span>￥</span>
                                                    <span className="DINPro">{item.goods_price}+{item.goods_price_q}</span>
                                                    <span>恒豆</span>
                                                </p>
                                                <p><span>{item.goods_sale_number}</span>人已购买</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Link>
                        )
                    }
                    }
                />
                {
                    edit ? <div>
                        <div className="myCollection_editOperationBar_placeholder" />
                        <div className="myCollection_editOperationBar">
                            <div className="flex_justify">
                                <Radio className="myCollection_editOperationBar_selectAll" checked={selectAll} onChange={this.handleSelectAll}> 全选</Radio>
                            </div>
                            <div>
                                <Button className="myCollection_editOperationBar_del" onClick={this.handleDelete}>删除</Button>
                            </div>
                        </div>
                    </div>
                        : ''
                }
            </div>
        )
    }

    private handleChangeSelet(index: number, status: boolean, e: React.MouseEvent<HTMLDivElement>) {
        e.preventDefault()
        const { SET_USER_COLLECTION } = this.props
        const collData = [...this.props.collData]
        collData.map((item: any, k: number) => {
            if (k === index) {
                item.active = status
            }
            return item
        })
        SET_USER_COLLECTION(collData)
        this.setState({
            selectAll: collData.every((item) => item.active)
        })
    }

    private getData = (finishLoad: () => void): void => {
        const { userInfo, SET_USER_COLLECTION, collData } = this.props
        this.index++
        post('usersapi/userCollectGoods', {
            userId: userInfo.id,
            page: this.index
        }).then((data: any) => {
            if (data.data.length) {
                const val = this.initData(data.data)
                if (this.index === 1) {
                    SET_USER_COLLECTION(val)
                } else {
                    const arr: any = [...collData]
                    SET_USER_COLLECTION(arr.concat(val))
                }
                finishLoad()
            }
        })
    }

    private initData(data: any[] = []) {
        return data.map((item: any) => {
            item.active = false
            return item
        })
    }

    private handleEdit = () => {
        this.setState({
            edit: true
        })
    }

    private handleSelectAll = (status: boolean) => {
        const { SET_USER_COLLECTION } = this.props
        const collData = [...this.props.collData]
        collData.map((item: any, k: number) => {
            item.active = status
            return item
        })
        SET_USER_COLLECTION(collData)
        this.setState({
            selectAll: status
        })
    }
    private handleDelete = () => {
        const { userInfo, SET_USER_COLLECTION } = this.props
        const collData = [...this.props.collData]
        const newData: any[] = []
        const ids: string[] = []
        collData.map((item: any) => {
            if (item.active) {
                ids.push(item.id)
            } else {
                newData.push(item)
            }
        })
        msg('确定要删除这些信息么').then(() => {
            Toast.loading('', 0)
            post('usersapi/delUserCollectGoods', {
                userId: userInfo.id,
                ids: ids.join(',')
            }).then((data: any) => {
                setTimeout(() => { Toast.hide(); SET_USER_COLLECTION(newData) }, 1000)

            }).catch(() => {
                setTimeout(() => { Toast.hide() }, 1000)
            })
        })
    }
    // private handleClickScreen = (index: number) => {
    //     const { selectd } = this.state
    //     if (selectd === index) {
    //         return
    //     }
    //     this.index = 0
    //     this.setState({
    //         selectd: index
    //     })
    // }
    // private handleClickCategory = () => {
    //     // console.log(0)
    //     // this.handleClickScreen(this.screenbar.length + 1)
    //     // this.setState({
    //     //     categoryClass: this.screenBarActive
    //     // })
    // }
}